<template>
	<div>
		<div class="container">
			<div class="search-box">
				<el-button type="success" :icon="CirclePlusFilled" @click="upVisible = true">表格上传</el-button>
				<el-button type="warning" :icon="CirclePlusFilled" @click="handleAdd()">新增样品</el-button>
				<el-link href="/样品出入库记录.xls" target="_blank">下载模板</el-link>
				<div class="search">
					<el-input v-model="query.name" placeholder="项目编号" class="search-input mr10" clearable></el-input>
					<el-button  type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableSplit()" border class="table" header-cell-class-name="table-header">
				<el-table-column prop="id" label="ID" width="55" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="project_id" label="项目编号" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="client_id" label="客户编号" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="sample_id" label="样品编号" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="sample_name" label="样品名称" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="lot_number" label="批号" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="size" label="原始规格" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="sample_amount" label="原始数量" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="arrive_time" label="到样日期" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="arrive_time" label="有效日期" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="create_time" label="创建日期" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="120" align="center">
					<template #default="scope">
						<el-button
							type="primary"
							size="small"
							:icon="View"
							v-permiss="15"
							@click="handleView(scope.row)"
						>
							查看
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="prev, pager, next,jumper,total"
					:current-page="state.pageIndex"
					:page-size="state.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>
		<el-dialog
			title="表格上传"
			v-model="upVisible"
			width="500px"
			destroy-on-close
			:close-on-click-modal="false"
		>
			<sampleUpload :url="sam_up_url" :uploadUpdate="uploadUpdate" />
		</el-dialog>
		<el-dialog
			draggable
			title="新增样品"
			v-model="addVisible"
			width="800px"
			destroy-on-close
			:close-on-click-modal="false"
		>
			<sampleAdd :data="rowData" :edit="idEdit" :update="updateData" />
		</el-dialog>
		<el-dialog
			draggable
			title="样品详情"
			v-model="viewVisible"
			width="900px"
			destroy-on-close
			:close-on-click-modal="false"
		>
			<sampleDetail :data='rowData' :Type='Type' />
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { pa } from 'element-plus/es/locale'
import { ref,reactive } from 'vue'
import { ElMessage, ElMessageBox, Table } from 'element-plus'
import { Delete, Search,Edit, Sort, CirclePlusFilled, View } from '@element-plus/icons-vue'

import sampleUpload from '../../../components/upload.vue'
import sampleDetail from '../components/sample_detail.vue'
import sampleAdd from '../components/sample_edit.vue'
import useSample from '../../../hooks/Sample/useSample'
import useProject from '../../../hooks/Project/useProject'

const { getSample,postSample,postSampleAdd,sam_url } = useSample()
const { getSampleProject } = useProject()
const sam_up_url = ref(sam_url + "/upload")

// 表格数据格式                                                                                                                                                                           
interface TableItem { 
	id: number;
	project_id: string;
	client_id: string;
	sample_id: string;
	sample_name: string;
	lot_number: string;
	size: string;
	sample_amount: number;
	arrive_time: string;
	instock_time: string;
	create_time: string;
}

const tableData = ref<TableItem[]>([]);
const pageTotal = ref(0);
const reload = () => {
	getSample().then( res=>{
		tableData.value=res.data["samples"];
		pageTotal.value=res.data["pageTotal"];
	})
}
reload()

const state = reactive({
	page:1,
	limit:20,
	pageIndex: 1,
	pageSize: 20,
	total:pageTotal
})
const tableSplit = () => {
	return(tableData.value.filter(
		(item,index) => 
		index < state.page * state.limit && index >= state.limit*(state.page - 1)
	))
}

const handlePageChange = (val: number) => {
	state.pageIndex = val;
	state.page = val;
};

const query = reactive({
	address: '',
	name: '',
	limit: 2,
	pageIndex: 1,
	pageSize: 1
});

const upVisible = ref(false)
let idx: number = -1
const uploadUpdate = () => {
	reload()
}

const addVisible = ref(false)
const idEdit = ref(false)

const viewVisible = ref(false)
const rowData = ref({})
const Type = ref("")
const handleView = (row: TableItem) => {
	rowData.value = row;
	viewVisible.value = true;
	Type.value = "samMan"
};

const handleAdd = () => {
	idEdit.value = false
	addVisible.value = true
}

const updateData = (row:TableItem) => {
	postSampleAdd(row).then(res=>{
		if(res.data === 202){
			reload()
			ElMessage.success("上传成功！！")
		}else if(res.data===404){
			ElMessage.error("上传错误！！")
		}
	});
	addVisible.value=false;
}

const handleSearch = () => {
	
}

</script>

<style scoped>
.search-box {
	margin-bottom: 20px;
}
.search {
	float:right;
}
.search-input {
	width: 200px;
}
.el-link {
  margin-left: 8px;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
.content-title {
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
.upload-demo {
    width: 360px;
}
</style>
